<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>I宠首页</title>
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<!-- 顶栏 -->
<div class="header">
    <div class="wrap cf">
        <span class="f_left welcome">欢迎来到I宠商城！</span>
        <div class="f_right header_cart_tip">
            <!--购物车-->
            <a href="shoppingcart.html" class="text"><span class="icon"></span>购物车（<span class="cartNum" th:text="${cartNum}">0</span>）</a>
            <div class="cart_list"></div>
        </div>
        <dl class="f_right">
            <dt><a href="mycollection.html" class="needLogin">我的收藏</a></dt>
            <dd><a href="myinformation.html" class="needLogin">个人信息</a></dd>
            <dd><a href="message.html" class="needLogin">消息</a></dd>
        </dl>
        <dl class="f_right userlogin">
            <!--登录 注册-->
            <dt><a href="login.html" class="needLogin" id="login">登录</a></dt>
            <dd><a href="register.html" target="_blank">注册</a></dd>
        </dl>
    </div>
</div>
<!-- 头部 -->
<div class="top_nav">
    <div class="wrap cf">
        <a href="index.html" class="f_left logo logo_wm"><img src="images/logo.png" width="100" height="50" title="I宠"></a>
        <div class="f_left all_wares">
            <p class="text"><span></span>全部商品</p>
            <!-- 访问商品列表 -->
            <ul style="display: none;">
                <li th:each="cate01:${categoryTree}">
                    <a th:href="@{'/list.html?cate01='+${cate01.cateName}}" target="_blank" class="ellipsis2" th:text="${cate01.name}">粮<em></em></a>
                    <dl th:each="cate02:${cate01.children}">
                        <dd><a th:href="@{'/list.html?cate02='+${cate02.name}}" target="_blank" th:text="${cate02.name}">狗粮</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
        <div class="f_right header_search">
            <!--顶部侧搜索框-->
            <form action="" method="get" class="cf">
                <input type="text" class="text" value="">
                <input type="button" class="btn">
            </form>
        </div>
    </div>
</div>
<!-- 轮播图 -->
<div class="header_slide">
    <div class="hd"><a href="javascript:void(0)" class=""></a><a href="javascript:void(0)" class=""></a><a href="javascript:void(0)" class="on"></a></div>
    <div class="bd">
        <!-- 轮播图获取数据 -->
        <div class="tempWrap" style="position: relative;" th:each="carousels:${carouselList}">
            <ul class="cf super_slide" style="position: relative;">
                <li th:style="'background: ' + '${carousels.image}' + ' center top no-repeat;'">
                    <a th:href="@{'/productdetail.html?'+${carousels.proId}" class="tj_link" target="_blank"></a>
                </li>
            </ul>
        </div>
        <a class="prev" href="javascript:void(0)"><span></span></a>
        <a class="next" href="javascript:void(0)"><span></span></a>
    </div>
</div>
<!-- 主粮 -->
<div class="area">
    <div class="wrap">
        <div class="title_main">
            <p class="f_left"><span class="icon"><img src="images/index/logo02.jpg"></span>主粮</p>
            <a href="list.html?carousel='主粮'" target="_blank" class="f_right more">更多<span></span></a>
        </div>
        <div class="cf">
            <a href="#" target="_blank" class="f_left ad in"><img src="images/index/kind01.jpg" width="226" height="614"></a>
            <div class="tempWrap" style="overflow:hidden; width:949px">
                <div class="f_left content">
                    <div class="main" th:each="proList01:${mainFood}">
                        <div class="product-item list in">
                            <a th:href="@{'/api/item/ipet/spu/proId='+ ${proList01.id}}" target="_blank">
                                <img th:src="${proList01.image}">
                            </a>
                            <p class="name ellipsis" th:text="${proList01.title}" style="。word-wrap: break-word; word-break: break-all;"></p>
                            <p class="price" th:text="${proList01.price}">99999.00</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 零食 -->
<div class="area">
    <div class="wrap">
        <div class="title_main">
            <p class="f_left"><span class="icon"><img src="images/index/logo02.jpg"></span>零食</p>
            <a href="list.html?carousel='零食'" target="_blank" class="f_right more">更多<span></span></a>
        </div>
        <div class="cf">
            <a href="#" target="_blank" class="f_left ad in"><img src="images/index/kind02.jpg" width="226" height="614"></a>
            <div class="tempWrap" style="overflow:hidden; width:949px">
                <div class="f_left content">
                    <div class="main" th:each="proList02:${pruductList02}">
                        <div class="product-item list in">
                            <a th:href="@{'/productdetail.html?proId='+${proList02.productId}}" target="_blank">
                                <img th:src="${proList02.image}">
                            </a>
                            <p class="name ellipsis" th:text="${proList02.proName}" style="word-wrap: break-word; word-break: break-all;">零食</p>
                            <p class="price" th:text="${proList02.price}">99999.00</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="area">
    <div class="wrap">
        <div class="title_main">
            <p class="f_left"><span class="icon"><img src="images/index/logo02.jpg"></span>保健</p>
            <a href="list.html?carousel='保健'" target="_blank" class="f_right more">更多<span></span></a>
        </div>
        <div class="cf">
            <a href="#" target="_blank" class="f_left ad in"><img src="images/index/kind03.jpg" width="226" height="614"></a>
            <div class="tempWrap" style="overflow:hidden; width:949px">
                <div class="f_left content">
                    <div class="main" th:each="proList03:${pruductList03}">
                        <div class="product-item list in">
                            <a th:href="@{'/productdetail.html?proId='+${proList03.productId}}" target="_blank">
                                <img th:src="${proList03.image}">
                            </a>
                            <p class="name ellipsis" th:text="${proList03.proName}" style="word-wrap: break-word; word-break: break-all;">保健</p>
                            <p class="price" th:text="${proList03.price}">99999.00</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="area">
    <div class="wrap">
        <div class="title_main">
            <p class="f_left"><span class="icon"><img src="images/index/logo02.jpg"></span>日用</p>
            <a href="list.html?carousel='日用'" target="_blank" class="f_right more">更多<span></span></a>
        </div>
        <div class="cf">
            <a href="#" target="_blank" class="f_left ad in"><img src="images/index/kind04.jpg" width="226" height="614"></a>
            <div class="tempWrap" style="overflow:hidden; width:949px">
                <div class="f_left content">
                    <div class="main" th:each="proList04:${pruductList04}">
                        <div class="product-item list in">
                            <a th:href="@{'/productdetail.html?proId='+${proList04.productId}}" target="_blank">
                                <img th:src="${proList04.image}">
                            </a>
                            <p class="name ellipsis" th:text="${proList04.proName}" style="word-wrap: break-word; word-break: break-all;">日用</p>
                            <p class="price" th:text="${proList04.price}">99999.00</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="area">
    <div class="wrap">
        <div class="title_main">
            <p class="f_left"><span class="icon"><img src="images/index/logo02.jpg"></span>玩具</p>
            <a href="list.html?carousel='玩具'" target="_blank" class="f_right more">更多<span></span></a>
        </div>
        <div class="cf">
            <a href="#" target="_blank" class="f_left ad in"><img src="images/index/kind05.jpg" width="226" height="614"></a>
            <div class="tempWrap" style="overflow:hidden; width:949px">
                <div class="f_left content">
                    <div class="main" th:each="proList05:${pruductList05}">
                        <div class="product-item list in">
                            <a th:href="@{'/productdetail.html?proId='+${proList05.productId}}" target="_blank">
                                <img th:src="${proList05.image}">
                            </a>
                            <p class="name ellipsis" th:text="${proList05.proName}" style="word-wrap: break-word; word-break: break-all;">玩具</p>
                            <p class="price" th:text="${proList05.price}">99999.00</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 底部 -->
<div class="about">
    <div class="wrap">
        <ul class="cf">
            <li class="goods"><span></span>正品保证</li>
            <li class="shopping"><span></span>轻松购物</li>
            <li class="logistics"><span></span>快速配送</li>
            <li class="return"><span></span>无忧退换</li>
        </ul>
        <div class="cf link">
            <dl>
                <dt>购物指南</dt>
                <dd><a href="#" target="_blank">常见问题</a></dd>
                <dd><a href="#" target="_blank" class="needLogin">订单状态</a></dd>
                <dd><a href="#" target="_blank">购物流程</a></dd>
                <dd><a href="#" target="_blank">支付方式</a></dd>
            </dl>
            <dl>
                <dt>配送方式</dt>
                <dd><a href="#" target="_blank">配送范围</a></dd>
                <dd><a href="#" target="_blank">快递费用</a></dd>
            </dl>
            <dl>
                <dt>售后服务</dt>
                <dd><a href="#" target="_blank">退换货流程</a></dd>
                <dd><a href="#" target="_blank">退换货政策</a></dd>
                <dd><a href="#" target="_blank">服务政策</a></dd>
            </dl>
            <dl>
                <dt>关注我们</dt>
                <dd><a href="#" target="_blank">公司官网</a></dd>
                <dd><a href="#" target="_blank">官方微信</a></dd>
                <dd>
                    <a href="#" target="_blank">商务合作</a>
                    <div class="tip">
                        <i></i>
                        <p>联系人：张先生</p>
                        <p>邮箱：<span>710757293@qq.com</span></p>
                        <p>联系电话：<span>184-0658-7237</span></p>
                    </div>
                </dd>
            </dl>
            <div class="f_right contact">
                <p class="tel">028-68723699</p>
                <p class="time">周一至周日 9:00-22:00</p>
                <a href="#" target="_blank" class="needLogin"><span></span>在线客服</a>
            </div>
        </div>
    </div>
</div>

<!-- copyright -->
<div class="copyright">
    <div class="wrap">
        <ul class="cf">
            <li><a href="#" target="_blank">公司介绍</a></li>
            <li><a href="#" target="_blank">开发团队</a></li>
            <li><a href="#" target="_blank">招聘信息</a></li>
            <li><a href="#" target="_blank">联系我们</a></li>
            <li><a href="#" target="_blank">法律声明</a></li>
            <li><a href="#" target="_blank">网站地图</a></li>
        </ul>
    </div>
</div>
</body>
<script type="text/javascript" src="js/jq_183.js"></script>
<script type="text/javascript" src="js/lib.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
    var ctx = '';
    var host_url = '#';
    var static_image_url = '#';
    var sso_service_type = '#';
    var page_id = 'index';
    var mobile = '';
</script>
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "#";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
</html>


